<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>实训第六次课仿apple官网</title>
		<link rel="stylesheet" type="text/css" href="css/apple-mac.css"/>
		<script type="text/javascript" src="js/mac.js" ></script>
	</head>
	<body>
		<div class="wideBox">
			<div class="header">
				<div class="adv-wrapper">
					<div class="adv-wrapper-text">&lt;广告&gt;</div>
				</div>
				<div class="navbar">
					<ul class="navbar-icon">
						<li>
							<a href="mac-apple.html"><img src="img/svg/icon_image_large.svg"/></a>
						</li>
						<li>
							<a href="mac-apple.html">Mac</a>
						</li>
						<li>
							<a href="iphone-ipad.html">iPad</a>
						</li>
						<li>
							<a href="iphone-apple.html">iPhone</a>
						</li>
						<li>
							<a href="watch.html">Watch</a>
						</li>
						<li>
							<a href="music.html">Music</a>
						</li>
						<li>
							<a href="newtechnology.html">技术支持</a>
						</li>
						<li>
							<a href="#"><img src="img/svg/search_image_large.svg"/></a>
						</li>
						<li>
							<a href="#"><img src="img/svg/bag_image_large.svg"/></a>
						</li>
					</ul>
				</div>
				<div class="product">
					<ul>
						<li>
							<a href="" class="product-icon">
								<img src="img/mac-svg/macbook_dark_large.svg">
								<span>MacBook</span>
								<span class="colorblue">新款</span>
							</a>
						</li>
						<li>
							<a href="" class="product-icon">
								<img src="img/mac-svg/macbook_air_dark_large.svg" />
								<span>MacBook Air</span>
							</a>
						</li>
						<li>
							<a href="" class="product-icon">
								<img src="img/mac-svg/macbookpro_dark_large.svg" />
								<span>MackBook Pro</span>
								<span class="colorblue">新款</span>
							</a>
						</li>
						<li>
							<a href="" class="product-icon">
								<img src="img/mac-svg/imac_dark_large.svg" />
								<span>iMac</span>
								<span class="colorblue">新款</span>
							</a>
						</li>
						<li>
							<a href="" class="product-icon">
								<img src="img/mac-svg/imac_pro_dark_large.svg" />
								<span>iMac pro</span>
								<span class="colorblue">新款</span>
							</a>
						</li>
						<li>
							<a href="" class="product-icon">
								<img src="img/mac-svg/imac_pro_dark_large.svg">
								<span>Mac Pro</span>
							</a>
						</li>
						<li>
							<a href="" class="product-icon">
								<img src="img/mac-svg/macmini_dark_large.svg">
								<span>Mac Mini</span>
							</a>
						</li>
						<li>
							<a href="" class="product-icon">
								<img src="img/mac-svg/mac_acc_dark_large.svg">
								<span>配件</span>
							</a>
						</li>
						<li>
							<a href="" class="product-icon">
								<img src="img/mac-svg/mac_osx_dark_large.svg">
								<span>macOS Sierra</span>
							</a>
						</li>
						<li>
							<a href="" class="product-icon">
								<img src="img/mac-svg/mac_comp_dark_large.svg">
								<span>机型比较</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="content">
				<div class="iMacProBoder">
					<div class="iMacPro">
						<div class="date">于12月发售</div>
						<h2 style="font-size: 80px;font-weight: 500;line-height: 1;">iMac Pro</h2>
						<h2 style="font-size: 40px;font-weight: 500;letter-spacing: .008em;">强大，大有专业风范。</h2>
						<p><a href="">进一步了解></a></p>
						<figure class="image-imacpro"></figure>
					</div>
				</div>
				<div class="iMacBoder">
					<div class="iMacMain">
						<div class="iMacWords">
						<h2 style="font-size: 80px;line-height: 1.06;font-weight: 500;margin-bottom: 20px;">iMac</h2>	
						<h2 style="font-size: 40px;font-weight: 500;letter-spacing: .008em;">目光所及，更显锋芒。</h2>	
						<p>
							<a href="">进一步了解 ></a>
							<a href="">购买 ></a>
						</p>
					</div>
						<div class="iMacImage">
						<figure></figure>
						</div>
					</div>
				</div>
				<div class="MacBookProBoder">
					<div class="MacBookProMain">
						<div class="MacBookProWords">
						<h2 style="font-size: 80px;line-height: 1.06;font-weight: 500;margin-bottom: 20px;">MacBook Pro</h2>	
						<h2 style="font-size: 40px;font-weight: 500;letter-spacing: .008em;">一身才华，一触，即发。</h2>	
						<p>
							<a href="">进一步了解 ></a>
							<a href="">购买 ></a>
						</p>
						<figure class="MacBookProImage"></figure>
					</div>

					
						
					</div>
				</div>
				<div class="MacBookBoder">
					<div class="MacBookMain">
						<div class="MacBookWords">
						<h2 style="font-size: 80px;line-height: 1.06;font-weight: 500;margin-bottom: 20px;">MacBook</h2>	
						<h2 style="font-size: 40px;font-weight: 500;letter-spacing: .008em;">轻于时代，先于时代。</h2>	
						<p>
							<a href="">进一步了解 ></a>
							<a href="">购买 ></a>
						</p>
					</div>
						<div class="MacBookImage">
						<figure></figure>
						</div>
					</div>
				</div>
				<div class="MacCompareBoder">
					<div class="MacCompareMain">
						<div class="MacCompareWords">
						<h2 style="font-size: 48px;letter-spacing: .006em;font-weight: 500;margin-bottom: 20px;">Mac 机型比较。</h2>	
						<p>
							<a href="">找到适合你的Mac ></a>
						</p>
					</div>
						<div class="MacCompareImage">
						<figure></figure>
						</div>
					</div>
				</div>
				<div class="BuyStrip">
					<div class="BuyStripMain">
						<div class="Periodization">
							<span>
								<img src="img/mac-img/icon_pickup_large.png" width="38px" height="44px">
								<h2 style="font-size: 24px;line-height: 1.2;letter-spacing: .015em;font-weight: 400;">分期付款</h2>
							</span>
							<p>
								符合条件的信用卡用户可选择
								<br>
								灵活的分期付款方式。
							</p>
							<a href="">进一步了解 ></a>
						</div>
						<div class="Delivery">
							<span>
								<img src="img/mac-img/icon_shipping_large.png" width="38px" height="44px">
								<h2 style="font-size: 24px;line-height: 1.2;letter-spacing: .015em;font-weight: 400;">免费送货</h2>
							</span>
							<p>
								享受免费送货上门服务。
							</p>
							<a href="">进一步了解 ></a>
						</div>		
						</div>
				</div>
				<div class="MacAccessoriesBoder">
					<div class="MacAccessoriesMain">
						<div class="MacAccessoriesWords">
							<h3 style="font-size: 48px;line-height: 1.06;font-weight: 500;margin-bottom: 20px;">Mac 配件</h2>	
							<p>
								<a href="">立即选购 ></a>
							</p>
						</div>
						<figure></figure>
					</div>
				</div>
				<div class="icloud">
					<div class="icloudImage">
						<figure></figure>
					</div>
				</div>						
				<div class="macOS">
					<div class="macOSUnderstand">
						<div class="DescribeOne">
							<h1>macOS Sierra</h1>
							<p>
								macos,是助你在 Mac 上尽情施展的强大操作系统。而
								<br>
								macOS Sierra 更为 Mac 带来了 Siri 这一新成员，和多种
								<br>
								欣赏照片的新方式，而且还能让不同设备之间的协作更加紧密
								<br>
								流畅。
							</p>
							<a href="">进一步了解 ></a>
						</div>
						<div class="DescribeTwo">
							<h1>iCloud</h1>
							<p>
								有了 iCloud，你在各种设备上都可获得最新版本的文档、
								<br>
								app、备忘录和通讯录等重要信息。
							</p>
							<span>
								<a href="">进一步了解 ></a>
							</span>
						</div>
					</div>
					<div class="macOSDescribe">
						<div class="macOSImage">
							<figure></figure>
						</div>
						<div class="macOSDescribeScript">
							<div class="FontOfmacOS">
								今秋推出
							</div>
							<h1>macOs High Sierra</h1>
							<p>
								<br>
								<br>
								macOS High Sierra为你的Mac带来前瞻性的新技术、增强的功能和
								<br>
								更迅捷的性能表现，让 macOS 登上一个新的高峰。
								</p>
							<a href="" style="color: white;">进一步了解 ></a>
						</div>
					</div>
				</div>	
				<div class="Applecation">
				<div class="ApplecationMain">
						<div class="ApplecationTitle">
							<h3>专业App</h3>
							<p>
								对于想要尽情发挥创意的专业人士而言，这里有众多为业界所推崇的 app，可以用来更好地掌控音乐与影片的剪
								<br>
								辑、处理和输出。
							</p>
						</div>
						<div class="ApplecationBar">
							<ul>
								<li onclick="show('one')"><!--<a href="#" >--><figure class="ImageOne"></figure>Final Cut Pro X<!--</a>--></li>
								<li onclick="show('two')"><!--<a href="#" >--><figure class="ImageTwo"></figure>Logic Pro X<!--</a>--></li>
								<li onclick="show('three')"><!--<a href="#" >--><figure class="ImageThree"></figure>Motion<!--</a>--></li>
								<li onclick="show('four')"><!--<a href="#" >--><figure class="ImageFour"></figure>Compressor<!--</a>--></li>
								<li onclick="show('five')"><!--<a href="#" >--><figure class="ImageFive"></figure>MainStage 3<!--</a>--></li>
							</ul>
						</div>
						<ul class="imglist">
							<li id="first">
								<div class="ApplecationImageOne">
									<div class="One">
										<figure class="ComputerBoderOne"></figure>
									</div>
									<div class="OneDescrip">
										<h1>Final Cut Pro X</h1>
										<p>为了满足如今剪辑师们四溢的灵感，Final Cut 
											<br>
											Pro 提供开创性的视频剪辑功能、强大的媒体组
											<br>
											织整理能力和杰出的性能，并针对 Mac 电脑和 
											<br>
											macOS Sierra 进行了全面优化。
										</p>
										<a>进一步了解></a>
									</div>
								</div>
							</li>
							<li id="second" class="hidden">
								<div class="ApplecationImageOne">
									<div class="One">
										<figure class="ComputerBoderTwo"></figure>
									</div>
									<div class="OneDescrip">
										<h1>Logic Pro X</h1>
										<p>Logic Pro 在你的 Mac 上构建起一座完备的录
											<br>
											音和 MIDI 工作室，以别开生面的方式满足你作
											<br>
											曲、录音、编辑和混音的各种所需。有了大量功能
											<br>
											齐备的插件，以及数千种声音和循环乐段，无论你
											<br>
											想创作哪种音乐，都能为你提供从灵感初现到完成
											<br />
											最后的母带的各种所需。
										</p>
										<a>进一步了解></a>
									</div>
								</div>
							</li>
							<li id="third" class="hidden">
								<div class="ApplecationImageOne ">
									<div class="One">
										<figure class="ComputerBoderThree"></figure>
									</div>
									<div class="OneDescrip">
										<h1>Motion</h1>
										<p>Motion 是一款强大的动态图形工具，可帮助你轻
											<br>
											松制作电影风格的 2D 及 3D 字幕、流畅的转场
											<br>
											和逼真的特效，一切效果即时可见。
										</p>
										<a>进一步了解></a>
									</div>
								</div>
							</li>
							<li id="forth" class="hidden">
								<div class="ApplecationImageOne ">
									<div class="One">
										<figure class="ComputerBoderFour"></figure>
									</div>
									<div class="OneDescrip">
										<h1>Compressor</h1>
										<p>从 Final Cut Pro 中导出项目的功能变得更强
											<br>
											大、更灵活。你可以自定义输出设置，使用分布式
											<br>
											编码功能提高工作效率，并且可以轻松将影片打包
											<br>
											提交至 iTunes Store。Compressor 是你自定
											<br>
											义编码的出色搭档。
											<!--[if IE]>
												
											<![endif]-->
										</p>
										<a>进一步了解></a>
									</div>
								</div>
							</li>
							<li id="fifth" class="hidden">
								<div class="ApplecationImageOne">
									<div class="One">
										<figure class="ComputerBoderFive"></figure>
									</div>
									<div class="OneDescrip">
										<h1>MainStage 3</h1>
										<p>为了满足如今剪辑师们四溢的灵感，Final Cut 
											<br>
											Pro 提供开创性的视频剪辑功能、强大的媒体组
											<br>
											织整理能力和杰出的性能，并针对 Mac 电脑和 
											<br>
											macOS Sierra 进行了全面优化。
										</p>
										<a>进一步了解></a>
									</div>
								</div>
							</li>
						</ul>		
				</div>

						
				</div>
				<div class="EducationApp">
					<div class="EducationAppPicture">
						<figure></figure>
					</div>
					<div class="EducationAppStyle">
						<h1>Mac 教育应用</h1>
						<p>让好奇心和创造力在课堂内外都得到激发。</p>
						<a href="" style="color: #6bf;">了解 Mac 教育应用 ></a>
						<a href="" style=" margin-left: 30px;color: #6bf;">高校师生选购 ></a>
					</div>
				</div>
				<div class="MacApp">
					<div class="MacAppPicture">
						<figure></figure>
					</div>
					<div class="MacAppStyle">
						<h1>Mac 商务应用</h1>
						<p>以强大的装备，让你的商务事业更上一层楼。</p>
						<a href="" style="color: #6bf;">了解 Mac 商务应用 ></a>
						<a href="" style="margin-left: 30px;color: #6bf;">商务选购 ></a>
					</div>
				</div>
			</div>
			
			
			
			<div class="footer">
				<div class="foot-middle-content">
					<div class="foot-link-list">
						<div>
							<span class="icon-apple" style="margin-top: 26px;"><img src="img/mac-svg/icon_large.svg"/></span>
							<span> > </span>
							<span> Mac</span>
						</div>
						<div class="foot-link-list-content">
							<ul class="foot-list-box">
								<li>
									<ul>
										<li><h5>选购及了解</h5></li>
										<li><a href="#">Mac</a></li>
										<li><a href="#">iPad</a></li>
										<li><a href="#">iPhone</a></li>
										<li><a href="#">Watch</a></li>
										<li><a href="#">Music</a></li>
										<li><a href="#">iTunes</a></li>
										<li><a href="#">iPod</a></li>
										<li><a href="#">配件</a></li>
										<li><a href="#">App Store 充值卡</a></li>
									</ul>
								</li>
								<li>
									<ul>
										<li><h5>App Store 商店</h5></li>
										<li><a href="#">查找零售店</a></li>
										<li><a href="#">Genius Bar 天才吧</a></li>
										<li><a href="#">Today at Apple</a></li>
										<li><a href="#">Apple 夏令营</a></li>
										<li><a href="#">Field Trip 课外活动</a></li>
										<li><a href="#">Apple Store App</a></li>
										<li><a href="#">翻新和优惠</a></li>
										<li><a href="#">分期付款</a></li>
										<li><a href="#">重复使用和循环利用</a></li>
										<li><a href="#">订单状态</a></li>
										<li><a href="#">选购帮助</a></li>
									</ul>
								</li>
								<li>
									<ul>
										<li><h5>教育应用</h5></li>
										<li><a href="#">Apple 与教育</a></li>
										<li><a href="#">高校师生选购</a></li>
									</ul>
									<ul>
										<li><h5>商务应用</h5></li>
										<li><a href="#">Apple 与商务</a></li>
										<li><a href="#">商务选购</a></li>
									</ul>
								</li>
								<li>
									<ul>
										<li><h5>账户</h5></li>
										<li><a href="#">管理你的Apple ID</a></li>
										<li><a href="#">Apple Store 账户</a></li>
										<li><a href="#">iCloud.com</a></li>
										<li><a href="#"></a></li>
									</ul>
									<ul>
										<li><h5>Apple 价值观</h5></li>
										<li><a href="#">辅助功能</a></li>
										<li><a href="#">环境责任</a></li>
										<li><a href="#">隐私</a></li>
										<li><a href="#">供应商责任</a></li>
									</ul>
								</li>
								<li>
									<ul>
										<li><h5>关于 Apple</h5></li>
										<li><a href="#">Newsroom</a></li>
										<li><a href="#">Apple 管理层</a></li>
										<li><a href="#">工作机会</a></li>
										<li><a href="#">活动</a></li>
										<li><a href="#">联系 Apple</a></li>
									</ul>
								</li>
							</ul>
						</div>	
							<p style="margin-top: 36%;">更多选购方式：前往 <a>Apple Store 零售店</a>，致电 400-666-8800 或查找在你附近的<a>授权经销商</a>。</p>
						</div>
					<div class="foot-copyright">
							<span>Copyright ? 2017 Apple Inc. 保留所有权利。</span>
							<div class="illegel-info">
								<span>隐私政策</span>
								<span>|</span>
								<span>使用条款</span>
								<span>|</span>
								<span>销售政策</span>
								<span>|</span>
								<span>法律信息</span>
								<span>|</span>
								<span>网站地图</span>
							</div>
							<div class="country-info" title="请输入国家和地区">
								<img src="img/mac-img/16.png"/>
								<span>中国</span>
							</div>
						</div>
				</div>
			</div>
			<div class="backup" id="backup">
				<a href="#header" class="backup-icon">^</a> 
			</div>
		</div>
		<script type="text/javascript" src="js/backup.js" ></script>
	</body>
</html>
